<template>
    <div class="searchResult pt-s pl-xs">
        <p class="mb-s">搜索成功 {{target ? searchEndPoint : '没有搜索到相关用户'}}</p>
        <div class="container flex target" v-show="target">
            <div class="profile ml-xxs mr-xs">
                <div class="avatar" :style="{
                    backgroundImage: `url(${searchResult.profile.url})`,
                    backgroundSize: searchResult.profile.scale + 'px',
                    backgroundPosition: `${searchResult.profile.pos.x}px ${searchResult.profile.pos.y}px`,
                }"></div>
            </div>
            <div class="sessionCtn">
                <h4 class="fc-white fs-s">{{searchResult.username}}</h4>
                <p>{{searchResult.signature}}</p>
            </div>
            <div class="addFriend">
                <a @click="friendReq"
                   v-show="canAdd"
                   :style="{color: hasAdd ? '#999' : '#888'}"
                >
                    {{hasAdd ? '已发送' : '添加'}}
                </a>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "searchPanel",
        props: ['target'],
        data() {
            return  {
                searchEnd: false,
                searchEndPoint: '',
                searchResult: {
                    profile: {
                        url: '',
                        scale: 0,
                        pos: {
                            x: 0,
                            y: 0,
                        }
                    },
                },
                canAdd: false,
                hasAdd: false,
            }
        },
        computed: {
            userData() {
                return this.$store.state.userData;
            }
        },
        watch: {
            target: function (newData) {
                if (newData) {
                    this.canAdd = true;
                    if (newData._id === this.userData._id) {
                        this.searchEndPoint = '该用户是你自己';
                        this.canAdd = false;
                    } else {
                        for (let i = this.userData.friends.length - 1; i > -1; i--) {
                            if (this.userData.friends[i]._id === newData._id) {
                                this.searchEndPoint = '该用户已是您的好友';
                                this.canAdd = false;
                                break
                            }
                        }
                    }
                    this.searchResult = newData;
                }
                this.hasAdd = false;
                this.searchEnd = false;
            }
        },
        methods: {
            init() {
                this.searchEnd = false;
                this.searchEndPoint = '';
            },

            friendReq() {
                if (!this.hasAdd) {
                    this.$socket.emit('friendReq', this.searchResult._id);
                    this.hasAdd = true;
                }
            },
        }
    }
</script>

<style scoped lang="scss">


    .container {
        position: relative;

        .profile {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background-color: #eee;
            flex-shrink: 0;

            .avatar {
                width: 45px;
                height: 45px;
                border-radius: 50%;
                background-repeat: no-repeat;
            }
        }

        .sessionCtn {
            p {
                width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .addFriend {
            a {
                display: flex;
                width: 40px;
                height: 40px;
                justify-content: center;
                align-items: center;
                user-select: none;
                cursor: pointer;

                &.done {
                    color: #888;
                }
            }
        }
    }
</style>